<template>
    <el-main>

        <div>
            <el-carousel style="margin-top: -20px" height="150px" direction="vertical" :autoplay="true">
                <el-carousel-item v-for="item in carouselPictureUrl" :key="item.id">
                    <el-image :src="item.pictureUrl" alt=""></el-image>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div id="tabsDiv" style="margin-top: 20px">
            <el-tabs @tab-click="tabClick" v-model="tabsActiveName" type="card">
                <el-tab-pane v-for="item in elTablePaneList" :key="item.name" :label="item.title" :name="item.name">
                    <router-view ></router-view>
                </el-tab-pane>
            </el-tabs>
        </div>

    </el-main>
</template>

<script>
    export default {
        inject: ['reload'],
        provide() {
            return {
                reload: this.reload
            }
        },
        data() {
            return {
                isReloadAlive: true,
                elTablePaneList: [{
                    title: "我的课程",
                    name: "myCourseTeach",
                }],
                tabsActiveName: "myCourseTeach",
                carouselPictureUrl: [
                    {
                        id: 1,
                        pictureUrl: require("@/assets/carouse_1.jpg")
                    },
                    {
                        id: 2,
                        pictureUrl: require("@/assets/carouse_2.jpg")
                    },
                    {
                        id: 3,
                        pictureUrl: require("@/assets/carouse_3.jpg")
                    }
                ],

            }
        },
        created() {

            this.$router.push({
                name: this.elTablePaneList[0].name
            })
        },
        methods: {
            tabClick(tab) {
                this.$router.push({
                    name: tab.name
                });
            }
        }

    }

</script>
<style>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    #tabsDiv {
        width: 100%;
        margin: 20px auto;
        background-color: #ffffff;
    }

    .el-tabs__content {

    }
</style>